<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Employee Info</title>
</head>
<body>
  <table id="dataTable" border="1" cellpadding="0" cellspacing="0" style="text-align: center">
    <tr>
      <th colspan="5">Employee Info</th>
    </tr>
    <tr>
      <th>id</th>
      <th>lastName</th>
      <th>email</th>
      <th>gender</th>
      <th>options(<a th:href="@{/toAdd}">add</a>)</th>
    </tr>
    <tr th:each="employee : ${employeeList}" >
      <td th:text="${employee.id}"></td>
      <td th:text="${employee.lastName}"></td>
      <td th:text="${employee.email}"></td>
      <td th:text="${employee.gender}"></td>
      <td>
        <a th:href="@{|/employee/${employee.id}|}">update</a>
        <a @click="deleteEmployee" th:href="@{|/employee/${employee.id}|}">delete</a>
      </td>
    </tr>
  </table>

  <form id="deleteForm" action="" method="post">
    <input type="hidden" name="_method" value="delete">

  </form>

  <script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
  <script type="text/javascript">
    const vm = new Vue({
      el: '#dataTable',
      data() {
        return{

        }
      },
      methods: {
        deleteEmployee(e) {
          let deleteForm = document.querySelector('#deleteForm')
          // 将触发点击事件的超链接的href属性赋值给表单的action
          deleteForm.action = e.target.href
          deleteForm.submit() // 提交表单
          e.preventDefault() // 取消超链接的默认行为--->就是跳转
        }
      }
    })
  </script>
</body>
</html>